<template>
  <div class="box">
    <div class="gengye">
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
      >
        <el-form-item label="昵称：">
          <el-input v-model="form.nickname"></el-input>
        </el-form-item>
        <el-form-item label="介绍：">
          <el-input
            type="textarea"
            v-model="form.description"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别：">
          <el-radio-group v-model="form.gender">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
            <el-radio :label="0">保密</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生日：">
          <el-col :span="11">
            <el-date-picker
              v-model="form.birthday"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="timestamp"
              style="width: 77%;"
            >
            </el-date-picker>
          </el-col>
        </el-form-item>
        <!-- <el-form-item label="地区：">
        <el-cascader
          v-model="form.province"
          :options="homeoptions"
        ></el-cascader>
      </el-form-item> -->
        <el-form-item>
          <el-button
            type="primary"
            @click="updateInfo"
          >保存</el-button>
        </el-form-item>
      </el-form>
      <!-- 更换头像 -->
      <div class="headpic">
        <img :src="form.avatarUrl">
        <span @click="showhuantou">更换头像</span>
      </div>
    </div>
    <div class="updatepic">
      <!-- 1、面包屑 -->
      <el-breadcrumb
        separator-class="el-icon-arrow-right"
        class="breadxie"
      >
        <el-breadcrumb-item class="goup"> <span @click="gojiedit">个人设置</span> </el-breadcrumb-item>
        <el-breadcrumb-item>更换头像</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 2、上传头像 -->
      <!-- 2.1上传——文字 -->
      <div class="hd">
        <el-button type="info">上传头像</el-button>
        <span>支持jpg、png、bmp格式的图片，且文件小于20M</span>
      </div>
      <!-- 2.2上传——区域 -->
      <div class="bd">
        <div class="left">
          <div class="img">
            <img src="../../../../assets/image/default_cover.png">
            <div class="ztag">
              <div class="rect">
                <div
                  class="zoom"
                  @mousedown="getpoint"
                ></div>
              </div>
              <img
                src="../../../../assets/image/bang1.jpg"
                class="img1"
              >
              <img
                src="../../../../assets/image/bang1.jpg"
                class="img2"
              >
            </div>
          </div>

        </div>
        <div class="right">
          <p class="firlook">头像预览</p>
          <div class="biglook"></div>
          <p class="s-fc4">大尺寸像素（180*180像素）</p>
          <div class="smalllook"></div>
          <p class="s-fc4">小尺寸像素（40*40像素）</p>
        </div>
      </div>
      <!-- 2.3上传——按钮 -->
      <div class="itm"></div>
    </div>
  </div>

</template>

<script>
import axios from 'axios'
// import { connect } from 'net';
export default {
  data () {
    return {
      form: {
        nickname: '',
        description: '',
        gender: 0,
        birthday: '',
        // province: '',
        avatarUrl: ''
      },
      boxX: 0,
      boxY: 0,
      left: 0,
      top: 0
      // homeoptions: [
      //   {
      //     value: '选项1',
      //     label: '直辖市',
      //     children: [{
      //       value: 'yizhi',
      //       label: '北京市'
      //     }, {
      //       value: 'fankui',
      //       label: '天津'
      //     }, {
      //       value: 'xiaolv',
      //       label: '上海'
      //     }, {
      //       value: 'kekong',
      //       label: '重庆'
      //     }]
      //   }, {
      //     value: '选项2',
      //     label: '特别行政区',
      //     children: [
      //       {
      //         value: 'yizhi',
      //         label: '香港'
      //       }, {
      //         value: 'fankui',
      //         label: '澳门'
      //       }]
      //   },
      //   {
      //     value: '选项2',
      //     label: '河北省',
      //     children: [
      //       {
      //         value: 'yizhi',
      //         label: '石家庄市'
      //       }, {
      //         value: 'fankui',
      //         label: '唐山市'
      //       },
      //       {
      //         value: 'yizhi',
      //         label: '秦皇岛市'
      //       }, {
      //         value: 'fankui',
      //         label: '邯郸市'
      //       },
      //       {
      //         value: 'yizhi',
      //         label: '邢台市'
      //       }, {
      //         value: 'fankui',
      //         label: '保定市'
      //       },
      //       {
      //         value: 'fankui',
      //         label: '张家口市'
      //       },
      //       {
      //         value: 'yizhi',
      //         label: '承德市'
      //       }, {
      //         value: 'fankui',
      //         label: '沧州市'
      //       },
      //       {
      //         value: 'fankui',
      //         label: '廊坊市'
      //       },
      //       {
      //         value: 'yizhi',
      //         label: '衡水市'
      //       }
      //     ]
      //   },
      //   {
      //     value: '选项2',
      //     label: '山西省'
      //   },
      //   {
      //     value: '选项2',
      //     label: '内蒙古'
      //   },
      //   {
      //     value: '选项2',
      //     label: '辽宁省'
      //   },
      //   {
      //     value: '选项2',
      //     label: '吉林省'
      //   },
      //   {
      //     value: '选项2',
      //     label: '黑龙江省'
      //   },
      //   {
      //     value: '选项2',
      //     label: '江苏省'
      //   },
      //   {
      //     value: '选项2',
      //     label: '浙江省'
      //   },
      //   {
      //     value: '选项2',
      //     label: '安徽省'
      //   },
      //   {
      //     value: '选项2',
      //     label: '福建省'
      //   },
      //   {
      //     value: '选项2',
      //     label: '江西省'
      //   },
      //   {
      //     value: '选项2',
      //     label: '山东省'
      //   },
      //   {
      //     value: '选项2',
      //     label: '河南省'
      //   },
      //   {
      //     value: '选项2',
      //     label: '湖北省'
      //   },
      //   {
      //     value: '选项2',
      //     label: '湖南省'
      //   },
      //   {
      //     value: '选项2',
      //     label: '广东省'
      //   },
      //   {
      //     value: '选项2',
      //     label: '广西省'
      //   },
      //   {
      //     value: '选项2',
      //     label: '海南省'
      //   },
      //   {
      //     value: '选项2',
      //     label: '西藏'
      //   },
      //   {
      //     value: '选项2',
      //     label: '陕西省'
      //   },
      //   {
      //     value: '选项2',
      //     label: '甘肃省'
      //   },
      //   {
      //     value: '选项2',
      //     label: '青海省'
      //   },
      //   {
      //     value: '选项2',
      //     label: '宁夏省'
      //   },
      //   {
      //     value: '选项2',
      //     label: '新疆'
      //   },
      //   {
      //     value: '选项2',
      //     label: '台湾省'
      //   }
      // ],
    }
  },
  props: ['uid'],
  created () {
    this.getuserinfo()
  },
  methods: {
    async getuserinfo () {
      let res = await axios.get('https://autumnfish.cn//user/detail?uid=' + this.uid);
      // console.log(res)
      // this.userinfo = res.data
      this.form = res.data.profile
    },
    async updateInfo () {
      let url = 'https://autumnfish.cn//user/update?gender=' + this.form.gender + '&signature=' + this.form.description + '&city=440300&nickname=' + this.form.nickname + '&birthday=' + this.form.birthday + '&province=440000'
      console.log(url)
      let res = await axios.get(url);
      console.log(res)

    },
    showhuantou () {
      document.getElementsByClassName('gengye')[0].style.display = 'none'
      document.getElementsByClassName('updatepic')[0].style.display = 'block'
    },
    gojiedit () {
      document.getElementsByClassName('updatepic')[0].style.display = 'none'
      document.getElementsByClassName('gengye')[0].style.display = 'block'
    },
    //获取页面滚动出去的距离 并处理兼容性
    getScroll () {
      return {
        scrollTop: document.documentElement.scrollTop || document.body.scrollTop,
        scrollLeft: document.documentElement.scrollLeft || document.body.scrollLeft
      }
    },
    // 获取鼠标在页面上的坐标
    getPage (e) {
      return {
        pageX: e.clientX + getScroll().scrollLeft,
        pageY: e.clientY + getScroll().scrollTop
      }
    },
    getpoint () {
      let box1 = document.getElementsByClassName('zoom')[0]
      document.onmousemove = function (event) {
        event = event || window.event;
        var left = event.clientX;
        var top = event.clientY;
        console.log(box1.offsetLeft, box1.offsetTop);
        // 一：按住小黑点鼠标移动
        // 1、让小黑点跟着鼠标移动
        // 2、获取小黑点的offsetLeft、offsetTop，就是盒子.rect的宽高，以及img2的clip
        // .style.clip = "rect("+ XXX + "px "+ XXX +"px "+ XXX +"px "+ XXX +"px)";
        console.log(left, top)
      };
      document.onmouseup = function () {
        // box1.style.left=box1.style.left;
        // 	box1.style.top=box1.style.top;
        document.onmousemove = null;
      }
    },
    getimgmove () {
      // 二：按住图片移动
      // 1、获取鼠标的位置：鼠标相对于ztag的距离-鼠标相对于rect的距离就是top、left
      // （clip的第1、4值与rect的top、left有关）--》只在移动十字架时变，缩放右下角不变。
      // （clip的第2、3值=rect的宽高+rect的top、left）--》移动、缩放都变
      // 2、修改盒子.rect的top、left，以及img2的clip
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  position: relative;
  .gengye {
    .el-input {
      width: 35%;
      margin-right: 27px;
    }
    .el-textarea {
      width: 35%;
    }
    .headpic {
      position: absolute;
      right: 400px;
      top: 0;
      width: 140px;
      height: 140px;
      img {
        width: 100%;
        height: 100%;
      }
      span {
        display: inline-block;
        width: 140px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        position: absolute;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        font-size: 12px;
        color: #fff;
        cursor: pointer;
      }
      span:hover {
        text-decoration: underline;
      }
    }
  }

  // 更新头像页
  .updatepic {
    display: none;
    .breadxie {
      height: 27px;
      border-bottom: 1px solid #cbcbcb;
      font-family: simsun, \5b8b\4f53;
      font-weight: bold;
      .goup {
        color: #0c73c2;
        cursor: pointer;
      }
      .goup:hover {
        text-decoration: underline;
      }
    }
    .hd {
      padding: 26px 0 30px 0;
      span {
        margin-left: 10px;
        font-size: 12px;
        color: #999;
      }
    }
    .bd {
      display: flex;
      align-items: center;
      .left {
        padding-right: 40px;
        border-right: 1px solid #e2e2e2;
        width: 322px;
        height: 322px;
        .img {
          width: 322px;
          height: 322px;
          border: 1px solid #d1d1d1;
          img {
            width: auto;
            height: auto;
            position: absolute;
          }
          // 遮罩——调整图片
          .ztag {
            position: relative;
            width: 323px;
            height: 323px;
            top: 0px;
            left: 0px;
            .rect {
              position: absolute;
              // 遮罩初始位置在图片中间
              // 移动十字角——变得是top、left，小黑点的top、left也要跟着变
              top: 71.5px;
              left: 71.5px;

              // 右下角小黑点移动，变得是宽高
              width: 180px;
              height: 180px;
              border: 1px solid #fff;
              z-index: 10;
              background-image: url();
              zoom: 1;
              cursor: move;

              .zoom {
                position: absolute;
                width: 6px;
                height: 6px;
                right: -1px;
                bottom: -1px;
                border: 1px solid #fff;
                cursor: nw-resize;
                background: #000;
                opacity: 0.8;
                overflow: hidden;
              }
            }
            .img1 {
              position: absolute;
              width: 100%;
              height: 100%;
              opacity: 0.5;
            }
            .img2 {
              clip: rect(72px, 252px, 252px, 72px);
              width: 100%;
              height: 100%;
              position: absolute;
            }
          }
        }
      }
      .right {
        padding-left: 40px;
        .firlook {
          margin: 0;
          padding: 0;
        }
        .biglook {
          width: 180px;
          height: 180px;
          overflow: hidden;
          margin: 20px 0 11px 0;
          border: 1px solid #ccc;
        }
        .s-fc4 {
          margin: 0;
          padding: 0;
          color: #999;
          font-size: 12px;
        }
        .smalllook {
          width: 40px;
          height: 40px;
          overflow: hidden;
          margin: 20px 0 11px 0;
          border: 1px solid #ccc;
        }
      }
    }
    .itm {
      margin-top: 40px;
    }
  }
}
</style>
